<template>
  <div v-if="showEnrollmentModal" class="enrollment-modal">
    <div class="modal-overlay" @click="closeModal"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">需要报名课程</h3>
        <button class="close-btn" @click="closeModal">
          <van-icon name="cross" />
        </button>
      </div>
      
      <div class="modal-body">
        <div class="course-info" v-if="courseInfo">
          <img :src="courseInfo.cover" :alt="courseInfo.title" class="course-cover">
          <div class="course-details">
            <h4 class="course-title">{{ courseInfo.title }}</h4>
            <p class="course-description">{{ courseInfo.description }}</p>
            <div class="course-meta">
              <span class="price" v-if="courseInfo.price">
                <span class="current-price">¥{{ courseInfo.price }}</span>
                <span v-if="courseInfo.original_price && courseInfo.original_price > courseInfo.price" 
                      class="original-price">¥{{ courseInfo.original_price }}</span>
              </span>
              <span v-else class="free-tag">免费</span>
              <span class="difficulty">{{ courseInfo.difficulty }}</span>
            </div>
          </div>
        </div>
        
        <div class="enrollment-message">
          <van-icon name="info-o" class="info-icon" />
          <p>您还未报名此课程，需要先报名才能观看视频内容。</p>
        </div>
        
        <div class="benefits">
          <h5>报名后您将获得：</h5>
          <ul>
            <li><van-icon name="checked" />完整的课程视频内容</li>
            <li><van-icon name="checked" />学习进度记录和断点续播</li>
            <li><van-icon name="checked" />课程资料和练习题</li>
            <li><van-icon name="checked" />学习证书（完成后）</li>
          </ul>
        </div>
      </div>
      
      <div class="modal-footer">
        <van-button 
          class="cancel-btn" 
          @click="closeModal"
          :disabled="enrolling"
        >
          取消
        </van-button>
        <van-button 
          type="primary" 
          class="enroll-btn"
          @click="handleEnroll"
          :loading="enrolling"
          :disabled="enrolling"
        >
          {{ enrolling ? '报名中...' : '立即报名' }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { StudyService } from '@/api/services';
import { showToast } from 'vant';

interface CourseInfo {
  id: number;
  title: string;
  description: string;
  cover: string;
  price?: number;
  original_price?: number;
  difficulty: string;
}

interface Props {
  show: boolean;
  courseInfo: CourseInfo | null;
}

interface Emits {
  (e: 'close'): void;
  (e: 'enrolled'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const showEnrollmentModal = ref(props.show);
const enrolling = ref(false);

// 监听props变化
watch(() => props.show, (newVal) => {
  showEnrollmentModal.value = newVal;
});

const closeModal = () => {
  showEnrollmentModal.value = false;
  emit('close');
};

const handleEnroll = async () => {
  if (!props.courseInfo) {
    showToast('课程信息不完整');
    return;
  }

  enrolling.value = true;
  
  try {
    const result = await StudyService.enrollCourse(props.courseInfo.id);
    
    if (result && result.code === 200) {
      showToast('报名成功！');
      emit('enrolled');
      closeModal();
    } else {
      showToast(result?.message || '报名失败，请重试');
    }
  } catch (error) {
    console.error('报名失败:', error);
    showToast('报名失败，请检查网络连接');
  } finally {
    enrolling.value = false;
  }
};
</script>

<script lang="ts">
import { watch } from 'vue';

export default {
  name: 'EnrollmentCheck'
};
</script>

<style scoped>
.enrollment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.26667vw;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: #fff;
  border-radius: 3.2vw;
  max-width: 85.33333vw;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 2.13333vw 8.53333vw rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4.26667vw 4.26667vw 2.13333vw;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 4.8vw;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  padding: 1.06667vw;
  color: #999;
  font-size: 5.33333vw;
  cursor: pointer;
}

.modal-body {
  padding: 4.26667vw;
}

.course-info {
  display: flex;
  gap: 3.2vw;
  margin-bottom: 4.26667vw;
  padding: 3.2vw;
  background: #f8f9fa;
  border-radius: 2.13333vw;
}

.course-cover {
  width: 21.33333vw;
  height: 16vw;
  border-radius: 1.6vw;
  object-fit: cover;
  flex-shrink: 0;
}

.course-details {
  flex: 1;
  min-width: 0;
}

.course-title {
  font-size: 4.26667vw;
  font-weight: 600;
  color: #333;
  margin: 0 0 1.06667vw 0;
  line-height: 1.3;
}

.course-description {
  font-size: 3.46667vw;
  color: #666;
  margin: 0 0 2.13333vw 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 2.13333vw;
  flex-wrap: wrap;
}

.price {
  display: flex;
  align-items: center;
  gap: 1.06667vw;
}

.current-price {
  font-size: 4.26667vw;
  font-weight: 600;
  color: #ff4444;
}

.original-price {
  font-size: 3.2vw;
  color: #999;
  text-decoration: line-through;
}

.free-tag {
  background: #07c160;
  color: #fff;
  padding: 0.53333vw 1.6vw;
  border-radius: 1.06667vw;
  font-size: 2.93333vw;
  font-weight: 500;
}

.difficulty {
  background: #1989fa;
  color: #fff;
  padding: 0.53333vw 1.6vw;
  border-radius: 1.06667vw;
  font-size: 2.93333vw;
}

.enrollment-message {
  display: flex;
  align-items: flex-start;
  gap: 2.13333vw;
  padding: 3.2vw;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 2.13333vw;
  margin-bottom: 4.26667vw;
}

.info-icon {
  color: #fa8c16;
  font-size: 4.8vw;
  margin-top: 0.26667vw;
  flex-shrink: 0;
}

.enrollment-message p {
  margin: 0;
  font-size: 3.73333vw;
  color: #d46b08;
  line-height: 1.4;
}

.benefits {
  margin-bottom: 2.13333vw;
}

.benefits h5 {
  font-size: 4vw;
  font-weight: 600;
  color: #333;
  margin: 0 0 2.13333vw 0;
}

.benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits li {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  padding: 1.06667vw 0;
  font-size: 3.73333vw;
  color: #666;
}

.benefits li .van-icon {
  color: #07c160;
  font-size: 4vw;
  flex-shrink: 0;
}

.modal-footer {
  display: flex;
  gap: 2.13333vw;
  padding: 2.13333vw 4.26667vw 4.26667vw;
  border-top: 1px solid #f0f0f0;
}

.cancel-btn {
  flex: 1;
  height: 11.73333vw;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #666;
  font-size: 4vw;
}

.enroll-btn {
  flex: 2;
  height: 11.73333vw;
  font-size: 4vw;
  font-weight: 600;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .course-info {
    flex-direction: column;
  }
  
  .course-cover {
    width: 100%;
    height: 42.66667vw;
  }
}
</style>
